<!DOCTYPE html>

<html class="app-ui">

    <head>
        <!-- Meta -->
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

        <!-- Document title -->
        <title>UI Elements &ndash; Cards API | AppUI</title>

        <meta name="description" content="AppUI - Admin Dashboard Template & UI Framework" />
        <meta name="author" content="rustheme" />
        <meta name="robots" content="noindex, nofollow" />

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="assets/img/favicons/apple-touch-icon.png" />
        <link rel="icon" href="assets/img/favicons/favicon.ico" />

        <!-- Google fonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,900%7CRoboto+Slab:300,400%7CRoboto+Mono:400" />

        <!-- AppUI CSS stylesheets -->
        <link rel="stylesheet" id="css-font-awesome" href="assets/css/font-awesome.css" />
        <link rel="stylesheet" id="css-ionicons" href="assets/css/ionicons.css" />
        <link rel="stylesheet" id="css-bootstrap" href="assets/css/bootstrap.css" />
        <link rel="stylesheet" id="css-app" href="assets/css/app.css" />
        <link rel="stylesheet" id="css-app-custom" href="assets/css/app-custom.css" />
        <!-- End Stylesheets -->
    </head>

    <body class="app-ui layout-has-drawer layout-has-fixed-header">
        <div class="app-layout-canvas">
            <div class="app-layout-container">

                <!-- Drawer -->
                <aside class="app-layout-drawer">

                    <!-- Drawer scroll area -->
                    <div class="app-layout-drawer-scroll">
                        <!-- Drawer logo -->
                        <div id="logo" class="drawer-header">
                            <a href="index.html"><img class="img-responsive" src="assets/img/logo/logo-backend.png" title="AppUI" alt="AppUI" /></a>
                        </div>

                        <!-- Drawer navigation -->
                        <nav class="drawer-main">
                            <ul class="nav nav-drawer">

                                <li class="nav-item nav-drawer-header">Apps</li>

                                <li class="nav-item">
                                    <a href="index.html"><i class="ion-ios-speedometer-outline"></i> Dashboard</a>
                                </li>

                                <li class="nav-item">
                                    <a href="frontend_home.html"><i class="ion-ios-monitor-outline"></i> Frontend</a>
                                </li>

                                <li class="nav-item nav-drawer-header">Components</li>

                                <li class="nav-item nav-item-has-subnav active open">
                                    <a href="javascript:void(0)"><i class="ion-ios-calculator-outline"></i> UI Elements</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_ui_buttons.html">Buttons</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_cards.html">Cards</a>
                                        </li>

                                        <li class="active">
                                            <a href="base_ui_cards_api.html">Cards API</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_layout.html">Layout</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_grid.html">Grid</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_icons.html">Icons</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_modals_tooltips.html">Modals / Tooltips</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_alerts_notify.html">Alerts / Notify</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_pagination.html">Pagination</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_progress.html">Progress</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_tabs.html">Tabs</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_typography.html">Typography</a>
                                        </li>

                                        <li>
                                            <a href="base_ui_widgets.html">Widgets</a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="nav-item nav-item-has-subnav">
                                    <a href="javascript:void(0)"><i class="ion-ios-compose-outline"></i> Forms</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_forms_elements.html">Elements</a>
                                        </li>

                                        <li>
                                            <a href="base_forms_samples.html">Samples</a>
                                        </li>

                                        <li>
                                            <a href="base_forms_pickers_select.html">Pickers &amp; Select</a>
                                        </li>

                                        <li>
                                            <a href="base_forms_validation.html">Validation</a>
                                        </li>

                                        <li>
                                            <a href="base_forms_wizard.html">Wizard</a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="nav-item nav-item-has-subnav">
                                    <a href="javascript:void(0)"><i class="ion-ios-list-outline"></i> Tables</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_tables_styles.html">Styles</a>
                                        </li>

                                        <li>
                                            <a href="base_tables_responsive.html">Responsive</a>
                                        </li>

                                        <li>
                                            <a href="base_tables_tools.html">Tools</a>
                                        </li>

                                        <li>
                                            <a href="base_tables_pricing.html">Pricing</a>
                                        </li>

                                        <li>
                                            <a href="base_tables_datatables.html">Wizard</a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="nav-item nav-item-has-subnav">
                                    <a href="javascript:void(0)"><i class="ion-ios-browsers-outline"></i> Pages</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_pages_blank.html">Blank</a>
                                        </li>

                                        <li>
                                            <a href="base_pages_inbox.html">Inbox</a>
                                        </li>

                                        <li>
                                            <a href="base_pages_invoice.html">Invoice</a>
                                        </li>

                                        <li>
                                            <a href="base_pages_profile.html">Profile</a>
                                        </li>

                                        <li>
                                            <a href="base_pages_search.html">Search</a>
                                        </li>

                                    </ul>
                                </li>

                                <li class="nav-item nav-item-has-subnav">
                                    <a href="javascript:void(0)"><i class="ion-social-javascript-outline"></i> JS plugins</a>
                                    <ul class="nav nav-subnav">

                                        <li>
                                            <a href="base_js_maps.html">Maps</a>
                                        </li>

                                        <li>
                                            <a href="base_js_sliders.html">Sliders</a>
                                        </li>

                                        <li>
                                            <a href="base_js_charts_flot.html">Charts - Flot</a>
                                        </li>

                                        <li>
                                            <a href="base_js_charts_chartjs.html">Charts - Chart.js</a>
                                        </li>

                                        <li>
                                            <a href="base_js_charts_sparkline.html">Charts - Sparkline</a>
                                        </li>

                                        <li>
                                            <a href="base_js_draggable.html">Draggable</a>
                                        </li>

                                        <li>
                                            <a href="base_js_syntax_highlight.html">Syntax highlight</a>
                                        </li>

                                    </ul>
                                </li>

                            </ul>
                        </nav>
                        <!-- End drawer navigation -->

                        <div class="drawer-footer">
                            <p class="copyright">AppUI Template &copy;</p>
                            <a href="https://shapebootstrap.net/item/1525731-appui-admin-frontend-template/?ref=rustheme" target="_blank" rel="nofollow">Purchase a license</a>
                        </div>
                    </div>
                    <!-- End drawer scroll area -->
                </aside>
                <!-- End drawer -->

                <!-- Header -->
                <header class="app-layout-header">
                    <nav class="navbar navbar-default">
                        <div class="container-fluid">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
                                <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
					<span class="sr-only">Toggle drawer</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
                                <span class="navbar-page-title">
					
					UI Elements &ndash; Cards API
				</span>
                            </div>

                            <div class="collapse navbar-collapse" id="header-navbar-collapse">
                                <!-- Header search form -->
                                <form class="navbar-form navbar-left app-search-form" role="search">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input class="form-control" type="search" id="search-input" placeholder="Search..." />
                                            <span class="input-group-btn">
								<button class="btn" type="button"><i class="ion-ios-search-strong"></i></button>
							</span>
                                        </div>
                                    </div>
                                </form>

                                <ul id="main-menu" class="nav navbar-nav navbar-left">
                                    <li class="dropdown">
                                        <a href="#" data-toggle="dropdown">English <span class="caret"></span></a>

                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:void(0)">French</a></li>
                                            <li><a href="javascript:void(0)">German</a></li>
                                            <li><a href="javascript:void(0)">Italian</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" data-toggle="dropdown">Pages <span class="caret"></span></a>

                                        <ul class="dropdown-menu">
                                            <li><a href="javascript:void(0)">Analytics</a></li>
                                            <li><a href="javascript:void(0)">Visits</a></li>
                                            <li><a href="javascript:void(0)">Changelog</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <!-- .navbar-left -->

                                <ul class="nav navbar-nav navbar-right navbar-toolbar hidden-sm hidden-xs">
                                    <li>
                                        <!-- Opens the modal found at the bottom of the page -->
                                        <a href="javascript:void(0)" data-toggle="modal" data-target="#apps-modal"><i class="ion-grid"></i></a>
                                    </li>

                                    <li class="dropdown">
                                        <a href="javascript:void(0)" data-toggle="dropdown"><i class="ion-ios-bell"></i> <span class="badge">3</span></a>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li class="dropdown-header">Profile</li>
                                            <li>
                                                <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">3</span> News </a>
                                            </li>
                                            <li>
                                                <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">1</span> Messages </a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">More</li>
                                            <li>
                                                <a tabindex="-1" href="javascript:void(0)">Edit Profile..</a>
                                            </li>
                                        </ul>
                                    </li>

                                    <li class="dropdown dropdown-profile">
                                        <a href="javascript:void(0)" data-toggle="dropdown">
                                            <span class="m-r-sm">John Doe <span class="caret"></span></span>
                                            <img class="img-avatar img-avatar-48" src="assets/img/avatars/avatar3.jpg" alt="User profile pic" />
                                        </a>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li class="dropdown-header">
                                                Pages
                                            </li>
                                            <li>
                                                <a href="base_pages_profile.html">Profile</a>
                                            </li>
                                            <li>
                                                <a href="base_pages_profile.html"><span class="badge badge-success pull-right">3</span> Blog</a>
                                            </li>
                                            <li>
                                                <a href="frontend_login_signup.html">Logout</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <!-- .navbar-right -->
                            </div>
                        </div>
                        <!-- .container-fluid -->
                    </nav>
                    <!-- .navbar-default -->
                </header>
                <!-- End header -->

                <main class="app-layout-content">

                    <!-- Page Content -->
                    <div class="container-fluid p-y-md">
                        <!-- Cards API, functionality initialized in App() -> uiCardsApi() -->
                        <h2 class="section-title">API</h2>

                        <div class="row">

                            <div class="col-sm-12">
                                <div class="card" id="sample-card">
                                    <div class="card-header">
                                        <h4>Sample card</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="fullscreen_toggle"></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <p>This is our test card with id <code>sample-card</code></p>
                                    </div>
                                </div>
                            </div>
                            <!-- .col-sm-12 -->

                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-block">
                                        <p>You can use <code>App.cards( '_#cardID_', '_mode_' );</code></p>
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>Live</th>
                                                        <th>Mode</th>
                                                        <th>Live</th>
                                                        <th>Mode</th>
                                                        <th>Live</th>
                                                        <th>Mode</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <button class="btn btn-app btn-pill btn-sm" type="button" onclick="App.cards( '#sample-card', 'content_toggle' );">Toggle Content</button>
                                                        </td>
                                                        <td>
                                                            <code>content_toggle</code>
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-app btn-pill btn-sm" type="button" onclick="App.cards( '#sample-card', 'fullscreen_toggle' );">Toggle Fullscreen</button>
                                                        </td>
                                                        <td>
                                                            <code>fullscreen_toggle</code>
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-app btn-pill btn-sm" type="button" onclick="App.cards( '#sample-card', 'refresh_toggle' );">Toggle Refresh</button>
                                                        </td>
                                                        <td>
                                                            <code>refresh_toggle</code>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td>
                                                            <button class="btn btn-app btn-pill btn-sm" type="button" onclick="App.cards( '#sample-card', 'content_hide' );">Hide Content</button>
                                                        </td>
                                                        <td>
                                                            <code>content_hide</code>
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-app btn-pill btn-sm" type="button" onclick="App.cards( '#sample-card', 'fullscreen_off' );">Fullscreen Off</button>
                                                        </td>
                                                        <td>
                                                            <code>fullscreen_off</code>
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-app btn-pill btn-sm" type="button" onclick="App.cards( '#sample-card', 'state_loading' );">State Loading</button>
                                                        </td>
                                                        <td>
                                                            <code>state_loading</code>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td>
                                                            <button class="btn btn-app btn-pill btn-sm" type="button" onclick="App.cards( '#sample-card', 'content_show' );">Show Content</button>
                                                        </td>
                                                        <td>
                                                            <code>content_show</code>
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-app btn-pill btn-sm" type="button" onclick="App.cards( '#sample-card', 'fullscreen_on' );">Fullscreen On</button>
                                                        </td>
                                                        <td>
                                                            <code>fullscreen_on</code>
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-app btn-pill btn-sm" type="button" onclick="App.cards( '#sample-card', 'state_normal' );">State Normal</button>
                                                        </td>
                                                        <td>
                                                            <code>state_normal</code>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td>
                                                            <button class="btn btn-app btn-pill btn-sm" type="button" onclick="App.cards( '#sample-card', 'open' );">Open</button>
                                                        </td>
                                                        <td>
                                                            <code>open</code>
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-app btn-pill btn-sm" type="button" onclick="App.cards( '#sample-card', 'close' );">Close</button>
                                                        </td>
                                                        <td>
                                                            <code>close</code>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <!-- .table-responsive -->
                                    </div>
                                </div>
                            </div>
                            <!-- .col-sm-12 -->
                        </div>
                        <!-- .row -->
                        <!-- End cards API -->

                        <!-- Interactive Cards, functionality initialized in App() -> uiCards() -->
                        <!-- In fullscreen and content toggle buttons, icon classes are auto added from App() -> uiCards() -->
                        <h2 class="section-title">Interactive cards</h2>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4>Toggle content</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <!-- To toggle Card's content, just add the following properties to your button: data-toggle="card-action" data-action="content_toggle" -->
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <p> Social impact international development; youth emergent experience in the field vaccine global human experience thinkers who make change happen Rosa Parks fairness. Diversification Ford Foundation recognize potential
                                            immunize connect Peace Corps advocate clean water; foundation The Elders smart cities assistance rural development.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4>Close</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <!-- To close a block, just add the following properties to your button: data-toggle="card-action" data-action="close" -->
                                                <button type="button" data-toggle="card-action" data-action="close"><i class="ion-close"></i></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <p>NGO employment equal opportunity, United Nations expanding community ownership public-private partnerships poverty democracy. Transform the world; social analysis, human-centered design justice freedom Andrew Carnegie
                                            long-term solution inclusive capitalism empower. Recognition combat HIV/AIDS social entrepreneurship.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4>Fullscreen</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <!-- To toggle card fullscreen, add the following properties to your button: data-toggle="card-action" data-action="fullscreen_toggle" -->
                                                <button type="button" data-toggle="card-action" data-action="fullscreen_toggle"></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <p>Work change-makers research detection healthcare. Cross-cultural sustainable future, Global South safety, combat malaria humanitarian donate investment development treatment. Empowerment dialogue, political global
                                            health indicator nutrition humanitarian relief developing refugee pathway to a better life civic engagement strengthen.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4>Refresh</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <!--
							To apply loading state to a card, add the following properties to your button: data-toggle="card-action" data-action="refresh_toggle"
							If you also add the property data-action-mode="demo" the loading state will be disabled in 2 seconds for demonstration purposes

							Without the demo mode, you can restore the card to its normal state by using the following JS code: App.cards( '#yourCardId' ,'state_normal' );
							You can use it after you've loaded successfully your data (please check Cards API)
							-->
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-android-refresh"></i></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <p>Momentum combat poverty Bono end hunger; impact care Angelina Jolie time of extraordinary change advancement vulnerable citizens. Our ambitions, design thinking; think tank, underprivileged, facilitate respect global
                                            citizens scalable sustainability aid citizenry. Global network truth assessment expert, working families, environmental.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4>All Together</h4>
                                        <ul class="card-actions">
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="fullscreen_toggle"></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="refresh_toggle" data-action-mode="demo"><i class="ion-android-refresh"></i></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="content_toggle"></button>
                                            </li>
                                            <li>
                                                <button type="button" data-toggle="card-action" data-action="close"><i class="ion-close"></i></button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-block">
                                        <p>Efficient country marginalized communities fighting poverty. Altruism mobilize change movements technology activist. Disruption non-partisan Rockefeller giving, nonviolent resistance measures Medecins du Monde legal
                                            aid. Reduce carbon emissions dignity governance, reproductive rights focus on impact resourceful educate compassion.</p>
                                        <p>Interconnectivity, sanitation enabler readiness positive social change cooperation policymakers, social foster climate change plumpy'nut solve. Implementation, action partnership liberal; peace asylum; committed;
                                            vulnerable population approach legitimize; human being our grantees and partners livelihoods.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Interactive cards -->
                    </div>
                    <!-- End Page Content -->

                </main>

            </div>
            <!-- .app-layout-container -->
        </div>
        <!-- .app-layout-canvas -->

        <!-- Apps Modal -->
        <!-- Opens from the button in the header -->
        <div id="apps-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-sm modal-dialog modal-dialog-top">
                <div class="modal-content">
                    <!-- Apps card -->
                    <div class="card m-b-0">
                        <div class="card-header bg-app bg-inverse">
                            <h4>Apps</h4>
                            <ul class="card-actions">
                                <li>
                                    <button data-dismiss="modal" type="button"><i class="ion-close"></i></button>
                                </li>
                            </ul>
                        </div>
                        <div class="card-block">
                            <div class="row text-center">
                                <div class="col-xs-6">
                                    <a class="card card-block m-b-0 bg-app-secondary bg-inverse" href="index.html">
                                        <i class="ion-speedometer fa-4x"></i>
                                        <p>Admin</p>
                                    </a>
                                </div>
                                <div class="col-xs-6">
                                    <a class="card card-block m-b-0 bg-app-tertiary bg-inverse" href="frontend_home.html">
                                        <i class="ion-laptop fa-4x"></i>
                                        <p>Frontend</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!-- .card-block -->
                    </div>
                    <!-- End Apps card -->
                </div>
            </div>
        </div>
        <!-- End Apps Modal -->

        <div class="app-ui-mask-modal"></div>

        <!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
        <script src="assets/js/core/jquery.min.js"></script>
        <script src="assets/js/core/bootstrap.min.js"></script>
        <script src="assets/js/core/jquery.slimscroll.min.js"></script>
        <script src="assets/js/core/jquery.scrollLock.min.js"></script>
        <script src="assets/js/core/jquery.placeholder.min.js"></script>
        <script src="assets/js/app.js"></script>
        <script src="assets/js/app-custom.js"></script>

    </body>

</html>